<template>
  <view class="info-layout">
    <TopBar title="车辆信息" />
    <view class="container">
      <view class="info">
        <view class="car-info">
          <view class="name">车牌号码</view>
          <view class="value">苏E12345</view>
        </view>

        <view class="car-info">
          <view class="name">车场名称</view>
          <view class="value">科技园停车场</view>
        </view>

        <view class="car-info">
          <view class="name">入场时间</view>
          <view class="value">2022-08-08 10:24:02</view>
        </view>
        <view class="car-info">
          <view class="name">停车时长</view>
          <view class="value">3小时</view>
        </view>
        <view
          class="car-info"
          style="border-bottom: 2px solid #ebebeb; padding-bottom: 80rpx"
        >
          <view class="name">总金额</view>
          <view class="value" style="color: #0680fe">￥15.00</view>
        </view>

        <view class="car-info" style="margin-top: 60rpx">
          <view class="name">实付金额</view>
          <view
            class="value"
            style="color: #0680fe; font-size: 40rpx; font-weight: bold"
            >￥15.00</view
          >
        </view>
      </view>
      <button type="primary" class="pay-btn" @click="sumbitMoney">
        确认支付
      </button>
    </view>
  </view>
</template>

<script setup>
import TopBar from "../../component/topbar.vue";
import { onLoad } from "@dcloudio/uni-app";
const openid = uni.getStorageSync("openId");
const token = uni.getStorageSync("token");

//接收参数
onLoad((options) => {
  console.log(options);
 // ✅ 关键：必须解码！
const decodedCarNo = decodeURIComponent(options.carNo)
  //调用账单接口
  uni.request({
    url: "https://qwscrm.com:9202//pay/v1/query-parking",
    method: "POST",
    header: { Authorization: `Bearer ${token}` },
    data: { "plateNo": decodedCarNo },
    success: (res) => {
      console.log(res);
    },
  });
});
//发起微信支付
const sumbitMoney = () => {
  //获取账单支付的接口
  uni.request({
    url: "https://qwscrm.com:9202//pay/v1/wx/jsapi-pay",
    method: "POST",
    header: { Authorization: `Bearer ${token}` },
    data: {
      description: "支付账单",
      outTradeNo: "266688890",
      amount: {
        total: 1,
        currency: "CNY",
      },
      payer: {
        openId: "oMPcZ7Sr730slVKkFPIloGyBb_LM",
      },
      cardNo: "苏E2375987",
    },
    success: (res) => {
      console.log("账单接口调用成功了" + res);
      //调用微信支付的函数
      uni.requestPayment({
        provider: "wxpay",
        timeStamp: res.data.data.timeStamp,
        nonceStr: res.data.data.nonceStr,
        package: res.data.data.package,
        signType: res.data.data.signType,
        paySign: res.data.data.paySign,
		orderInfo:{},
		success:()=>{
		uni.showToast({
			title:"支付成功",
			icon:'none'
		})
		uni.reLaunch({ url: '/pages/index/index' })	
		},
		fail:(fail)=>{
			uni.showToast({
			title:"取消支付",
			icon:'none'
		})
		console.log(fail);	
		},
      });
    },
  });
};
</script>

<style lang="less">
.info-layout {
  .container {
    margin-top: 16rpx;
    .car-name {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 32rpx;
      .right-group {
        width: 112rpx;
        height: 28rpx;
        font-family: "Source Han Sans CN, Source Han Sans CN";
        font-weight: 500;
        font-size: 28rpx;
        color: #999999;
        line-height: 28rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
    }
    .info {
      margin-top: 32rpx;

      .car-info {
        margin: 28rpx 64rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .name {
          font-size: 28rpx;
          color: #666666;
          line-height: 28rpx;
          text-align: left;
          width: 140rpx;
          height: 28rpx;
        }
        .value {
          font-weight: 500;
          font-size: 28rpx;
          color: #333333;
          line-height: 28rpx;
          text-align: left;
        }
      }
    }
    .pay-btn {
      margin-top: 136rpx;
      width: 654rpx;
      height: 80rpx;
      background: #0680fe;
      border-radius: 100rpx;
      font-weight: 500;
      font-size: 36rpx;
      color: #ffffff;
      text-align: left;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
